<template>
    <div class="container">
        <!--加盟流程-->
        <div class="liucheng">
            <!--标题  pc-->
            <div class="liucheng-title">

            </div>
            <!--图片和文字  pc-->
            <div class="liucheng-img-box">
                <ul class="liucheng-img-box-nav">
                    <li>加盟申请</li>
                    <li>意向洽谈</li>
                    <li>店铺评估</li>
                    <li>审查确定</li>
                    <li>签订合同</li>
                    <li>店面装修</li>
                    <li>开业培训</li>
                    <li>隆重开业</li>
                </ul>
                <div class="liucheng-img-box-dianmian">

                </div>
            </div>
        </div>

        <!--常见问题-->
        <div class="problem">
            <!--标题  pc-->
            <div class="problem-title">

            </div>
            <div class="problem-box">
                <ul class="row problem-box-nav">
                    <li class="col-xs-6" v-for="(item,index) in problemBoxData" :key="index"><a href="javascript:;">{{
                        item.paoblemTitle | slh(15) }}</a></li>
                </ul>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "zhengce",
        data() {
            // 模拟常见问题数据
            return {
                problemBoxData: [
                    {id: 1, paoblemTitle: "开一家麻辣香锅店投资成本多少？"},
                    {id: 2, paoblemTitle: "开一家麻辣香锅店投资成本多少？"},
                    {id: 3, paoblemTitle: "如何看麻辣香锅的加盟市场？"},
                    {id: 4, paoblemTitle: "如何看麻辣香锅的加盟市场？"},
                    {id: 5, paoblemTitle: "麻辣香锅加盟店费是越低越好吗？"},
                    {id: 6, paoblemTitle: "麻辣香锅加盟店费是越低越好吗？"},
                    {id: 7, paoblemTitle: "麻辣香锅如何提高人气？"},
                    {id: 8, paoblemTitle: "开麻辣香锅店加盟好还是自己做好？"},

                ]
            }
        }
    }
</script>

<style lang="less">
    /*加盟流程*/
    .liucheng {
        margin-top: 84px;
        margin-bottom: 138px;
        /*标题  pc*/

        .liucheng-title {
            width: 1042px;
            height: 55px;
            margin: 0 auto;
            background: url("../../assets/images/product/liucheng_title_small.png") no-repeat center center;
        }


        /*文字和图片*/
        @media (min-width: 992px) {
            .liucheng-img-box {
                margin-left: 90px;
                position: relative;
                margin-top: 88px;
                margin-right: 120px;

                .liucheng-img-box-nav {
                    li {
                        font-size: 24px !important;
                    }
                }

                &::after {
                    content: "";
                    position: absolute;
                    top: -40px;
                    right: -60px;
                    width: 760px;
                    height: 535px;
                    background: url("../../assets/images/product/malatangdianmian.png") no-repeat center center;
                    background-size: cover;
                }
            }
        }
        @media (max-width: 768px) {
            .liucheng-img-box {
                margin-top: 20px;

                .liucheng-img-box-nav {
                    li {
                        font-size: 18px !important;
                    }
                }
            }
        }

        .liucheng-img-box {
            height: 463px;


            background: url("../../assets/images/product/liucheng _back.png") no-repeat center center;
            background-size: cover;
            background-color: #000;

            .liucheng-img-box-nav {
                padding-left: 47px;
                padding-top: 25px;
                float: left;

                li {
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 48px;
                    letter-spacing: 3px;
                    color: #fff;
                }
            }
        }
    }

    /*常见问题*/
    .problem {
        /*标题  pc*/

        .problem-title {
            width: 1042px;
            height: 58px;
            margin: 0 auto;
            background: url("../../assets/images/product/problem_title_small.png") no-repeat center center;
        }

        .problem-box {
            margin-top: 70px;

            .problem-box-nav {
                margin: 0 auto;
                width: 700px;

                li {
                    a {
                        text-align: left;
                        font-size: 20px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 50px;
                        letter-spacing: 0px;
                        color: #333333 !important;

                        &:hover {
                            color: #a30808 !important;
                        }

                        &:link {
                            color: #333;
                        }
                    }
                }
            }
        }
    }
</style>